<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>地址查询</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="parnet" id="app">
			<div class="wrap">
				<div class="search-bg">
					<div class="city"><a href="javascript:;" id="city">厦门</a>
						<img src="__API__/lib/images/xiala.png" alt="" />
					</div>
					<div class="map-search">
						<div class="search-icon"><img src="__API__/lib/images/search.png" alt=""></div>
						<input placeholder="领袖天地" v-model="searchValue" @keyup.enter="onSearch()" />
						<div class="clear" @click="clearInput()"><img src="__API__/lib/images/close2.png" alt="" /></div>
					</div>
				</div>
				<div class="map-wrap">
					<div id="map"></div>
				</div>
				<div class="list">
					<div :id="'a-'+i" class="li" v-for="(item,i) in list" @click="onListAddress(item)">
						<div class="icon">
							<img v-if="i == 0" src="__API__/lib/images/position.png" />
							<span v-else></span>
						</div>
						<div class="info">
							<div class="name" :class="i == 0?'blue':''">{{i == 0 ? '[当前]':''}}{{item.title}}</div>
							<div class="address">{{item.address}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<style>
			.wrap {
				width: 100%;
				height: 100vh;
				display: flex;
				flex-direction: column;
			}

			.city {
				display: flex;
				align-items: center;
				font-size: .28rem;
				color: #333;
				flex-shrink: 0;
				margin-right: .3rem;
			}

			.city img {
				width: .19rem;
				margin-left: .15rem;
			}

			.map-wrap {
				width: 100%;
				height: 5.6rem;
				background-color: #ccc;
			}

			.map-wrap .map {
				width: 100%;
				height: 100%;
			}

			.map-wrap .bubble {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 2;
				display: flex;
				align-items: center;
				width: 5.36rem;
				height: 1.1rem;
				margin-top: -1.6rem;
				margin-left: -2.68rem;
				overflow: visible;
				border-radius: .1rem;
				background: rgba(0, 0, 0, 0.6);
			}

			.map-wrap .current-location {
				position: absolute;
				left: .2rem;
				bottom: .2rem;
				z-index: 2;
				width: .64rem;
				height: .64rem;
			}

			.map-wrap .bubble::after {
				content: '';
				position: absolute;
				bottom: -4px;
				left: 50%;
				margin-left: -4px;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 4px solid rgba(0, 0, 0, 0.6);
			}

			.bubble .location {
				width: 3.45rem;
				margin-left: .18rem;
			}

			.bubble .location_desc {
				font-size: .3rem;
				line-height: .4rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: white;
			}

			.bubble .location_name {
				font-size: .28rem;
				line-height: .4rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: white;
			}

			.map-wrap .logo {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 60rpx;
				height: 60rpx;
				margin-top: -.3rem;
				margin-left: -.3rem;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 0 4rpx .2rem 1rpx rgba(180, 180, 180, 0.6);
			}

			.map-wrap .submit {
				width: 132rpx;
				font-size: .28rem;
				line-height: 58rpx;
				text-align: center;
				border-radius: 6rpx;
				margin-left: .2rem;
				color: white;
			}

			.list {
				width: 100%;
				box-sizing: border-box;
				padding: 0 .24rem;
				height: calc(100vh - 6.5rem);
				background: white;
				overflow-y: scroll;
			}

			.list .li {
				display: flex;
				align-items: center;
				padding: .3rem 0;
				border-bottom: .5px solid #e5e5e5;
			}

			.list .li img {
				width: .3rem;
				height: .38rem;
			}

			.list .li>.icon {
				margin-left: .2rem;
				color: #333;

			}

			.list .li>.icon span {
				display: block;
				width: .16rem;
				height: .16rem;
				border-radius: 50%;
				background-color: #999;
			}

			.list .li>.info {
				padding: 0 .2rem;
				box-sizing: border-box;
				flex: 1;
				color: #333;
			}

			.list .name {
				font-size: .3rem;
				line-height: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #333;
				font-weight: bold;
			}

			.list .address {
				flex-wrap: wrap;
				font-size: .24rem;
				line-height: .4rem;
				margin-top: .1rem;
				color: #999;
			}

			.search-bg {
				display: flex;
				align-items: center;
				width: 100%;
				height: .9rem;
				padding-left: .2rem;
				box-sizing: border-box;
				background: white;
			}

			.search-bg .map-search {
				display: flex;
				align-items: center;
				flex: 1;
				height: .64rem;
				border-radius: 3px;
				background: #f0f2f5;
				margin-right: .3rem;
				padding: .26rem;
			}

			.search-bg .map-search .search-icon {
				width: .2rem;
				margin-right: .4rem;
			}

			.search-bg .map-search input {
				flex: 1;
				font-size: .28rem;
				color: #333;
			}

			.search-bg .map-search .clear {
				flex-shrink: 0;
				width: .4rem;
				height: .4rem;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.search-bg .map-search .clear img {
				width: .23rem;
			}

			.search-bg .search-now {
				text-align: center;
				font-size: .3rem;
				line-height: .9rem;
				flex: 1;
				color: #70767b;
			}
		</style>
		<script>
			$(function(){
				let cityList = $.each(cityStr,function(i,item){
					delete item.childs
				})
				var mobileSelect = new MobileSelect({
					trigger: '#city',
					wheels: [{
						data: cityList
					}],
					ensureBtnText: '确定',
					position: [1],
					callback: function(indexArr, data) {
						$('#city').css('color','#333');
						console.log(data)
						app.$data.city = data[0].value;
					}
				});
			})
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					searchValue: '',
					latitude: '',
					longitude: '',
					city: '厦门',

					list: [{
							title: '领show天地广场',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地年轻力中心',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地年轻力中心-地上停车场',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地-东门',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地-东门',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地年轻力中心',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地年轻力中心-地上停车场',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地-东门',
							address: '厦门市海沧区成州工业区九号区'
						},
						{
							title: '领SHOW天地-东门',
							address: '厦门市海沧区成州工业区九号区'
						}
					]
				},
				created: function() {
					var that = this;
				},
				methods: {
					onSearch() {
						var that = this;
						console.log(that.searchValue)
						qqmapsdk.getSuggestion({
							keyword: 'YWQBZ-FCFKW-IVERF-OUTRE-ZTZKJ-KLBBH',
							location: location ? location : undefined,
							success: (res, data) => {
								console.log(data)
								if (res.data.length == 0) {
									app.showToast('搜索不到地址', () => {})
									return
								}
								this.setData({
									bubble: true,
									location: res.data[0],
									longitude: res.data[0].location.lng,
									latitude: res.data[0].location.lat,
									list: res.data,
									scrollIndex: 'a-0'
								})
							}
						})
					},
					onListAddress(data) {
						common.addCache('addressData',JSON.stringify(data));
						common.PageBack();
					},
					clearInput() {
						this.searchValue = ''
					},

				}

			})
		</script>
	</body>

</html>
